<!--水军用户-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入用户昵称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleAdd()"
          v-hasPermi="['video:list:add']"
        >新增</el-button>
        <el-button type="success" plain size="mini" @click="handleMoreOpen">批量开店</el-button>
        <el-button type="success" plain size="mini" @click="handleMoreAnchor">批量主播</el-button>
        <el-button type="success" plain size="mini" @click="handleEdit">批量修改</el-button>
        <!--        <el-button type="success" plain size="mini" @click="handleEditAvatar">批量修改头像</el-button>-->
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="listList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="用户名"
        align="center"
        prop="userName"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="用户呢称"
        align="left"
        prop="nickName"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="余额"
        align="left"
        prop="amount"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="邮箱"
        align="left"
        prop="email"
        width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="邀请码"
        align="center"
        prop="invitationCode"
        width="80"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="上级名称"
        align="center"
        prop="superiorName"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <router-link :to="'/user/list/'+scope.row.superior">
            <el-button size="mini" type="text">{{ scope.row.superiorName }}</el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        label="下级数量"
        align="center"
        prop="lowerCount"
        width="80"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="注册时间"
        align="center"
        prop="createTime"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="最后登录时间"
        align="center"
        prop="lastLoginTime"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastLoginTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="max-operate-tab"
        width="270"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['user:list:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-attract"
            @click="handleAmount(scope.row)"
            v-hasPermi="['user:list:edit']"
          >修改余额</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="$router.push({ path: '/navy/address', query: { id: scope.row.id ,userName:scope.row.userName} })"
          >添加地址</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加修改用户信息 -->
    <el-dialog title="新增水军" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="新增个数" prop="count">
          <el-input class="modal-input" v-model="form.count" placeholder="请输入新增个数" />
        </el-form-item>
        <el-form-item label="名称" prop="names">
          <el-input class="modal-input" v-model="form.names" placeholder="请输入水军用户名称" />
        </el-form-item>
        <el-form-item label="邀请码" prop="invitationCode">
          <el-input class="modal-input" v-model="form.invitationCode" placeholder="请输入邀请码" />
        </el-form-item>
        <el-form-item label="是否同时增加店铺" prop="addShop">
          <el-radio v-model="form.addShop" label="1">是</el-radio>
          <el-radio v-model="form.addShop" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="是否同时成为主播" prop="addAnchor">
          <el-radio v-model="form.addAnchor" label="1">是</el-radio>
          <el-radio v-model="form.addAnchor" label="0">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改水军" :visible.sync="openEdit" width="700px" append-to-body>
      <el-row>
        <el-col :span="6">
          <el-button :type="edit == 'fund' ? 'primary' : ''" @click="editType('fund')">修改余额</el-button>
        </el-col>
        <el-col :span="6">
          <el-button :type="edit == 'gold' ? 'primary' : ''" @click="editType('gold')">修改代币</el-button>
        </el-col>
        <el-col :span="6">
          <el-button :type="edit == 'name' ? 'primary' : ''" @click="editType('name')">修改名称</el-button>
        </el-col>
        <el-col :span="6">
          <el-button :type="edit == 'avatar' ? 'primary' : ''" @click="editType('avatar')">修改头像</el-button>
        </el-col>
      </el-row>
      <el-form ref="formEdit" :model="formEdit">
        <el-form-item label="已选择" prop="userIds">
          <div style="display: flex;flex-wrap: wrap;align-items: center">
            <div
              v-for="item in selectList"
              :key="item.id"
              style="padding-right: 10px"
            >{{item.userName}}</div>
          </div>
        </el-form-item>
        <el-form-item
          label="类型"
          prop="category"
          v-if="edit == 'fund'"
          :rules="[{ required: true, message: '请选择修改余额类型', trigger: 'blur' }]"
        >
          <el-radio v-model="formEdit.category" label="gf">充值</el-radio>
          <el-radio v-model="formEdit.category" label="de">扣款</el-radio>
        </el-form-item>
        <el-form-item
          label="调整余额"
          prop="amount"
          v-if="edit == 'fund'"
          :rules="[{ required: true, message: '请输入调整的余额数', trigger: 'blur' }]"
        >
          <el-input
            type="number"
            :min="0"
            class="modal-input"
            v-model="formEdit.amount"
            placeholder="请输入水军用户名称"
          />
        </el-form-item>
        <el-form-item
          label="调整金币"
          prop="goldNumber"
          v-if="edit == 'gold'"
          :rules="[{ required: true, message: '请输入调整的金币数', trigger: 'blur' }]"
        >
          <el-input
            type="number"
            :min="0"
            class="modal-input"
            v-model="formEdit.goldNumber"
            placeholder="请输入水军用户名称"
          />
        </el-form-item>
        <el-form-item
          label="名称"
          prop="names"
          v-if="edit == 'name'"
          :rules="[{ required: true, message: '请输入修改的名称，多个名称用逗号隔开', trigger: 'blur' }]"
        >
          <el-input class="modal-input" v-model="formEdit.names" placeholder="请输入水军用户名称" />
        </el-form-item>
        <el-form-item
          label="头像"
          prop="pics"
          v-if="edit == 'avatar'"
          :rules="[{ required: true, message: '请上传头像', trigger: 'blur' }]"
        >
          <ImageUpload :limit="avatarNum" v-model="formEdit.pics"></ImageUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormEdit">确定</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </div>
    </el-dialog>

    <!--    修改用户信息-->
    <el-dialog title="修改用户信息" :visible.sync="open1" width="1000px" append-to-body>
      <el-form ref="form" :model="formPop" :rules="rules">
        <el-form-item
          label="昵称"
          prop="userName"
          :rules="[{required:true,message:'昵称不能为空',trigger:['blur','change']}]"
        >
          <el-input class="modal-input" v-model="formPop.userName" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
          :rules="[{required:true,message:'邮箱不能为空',trigger:['blur','change']}]"
        >
          <el-input class="modal-input" v-model="formPop.email" placeholder="请输入需要修改邮箱" />
        </el-form-item>
        <!-- <el-form-item
          label="邀请码"
          prop="invitationCode"
          :rules="[{required:true,message:'邀请码不能为空',trigger:['blur','change']}]"
        >
          <el-input
            class="modal-input"
            disabled="true"
            v-model="formPop.invitationCode"
            placeholder="邀请码"
          />
        </el-form-item>-->
        <el-form-item label="用户头像" prop="userAvatar">
          <ImageUpload :limit="1" v-model="formPop.pic"></ImageUpload>
        </el-form-item>
        <el-divider></el-divider>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="open1 = false;">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="修改余额"
      :visible.sync="openChangeBalance"
      width="500px"
      append-to-body
      @close="$refs.formBalance.resetFields()"
    >
      <el-form ref="formBalance" :model="formBalance" :rules="rulesCategory">
        <el-form-item label="类型" prop="category">
          <el-radio v-model="formBalance.category" label="gf">充值</el-radio>
          <el-radio v-model="formBalance.category" label="de">扣费</el-radio>
        </el-form-item>
        <el-form-item label="金额" prop="amountIncurred">
          <el-input v-model="formBalance.amountIncurred" type="number" :min="0" placeholder="请输入金额"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="text" v-model="formBalance.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormBalance">确定</el-button>
        <el-button @click="cancelFormBalance">取消</el-button>
      </div>
    </el-dialog>

    <!-- 修改头像 -->
    <!--    <el-dialog title="修改水军头像" :visible.sync="openEditAvatar" width="700px" append-to-body>
      <el-form ref="formEditAvatar" :model="formEditAvatar" :rules="rulesEditAvatar">
        <el-form-item label="已选择" prop="userIds">
          <div>
            <sapn v-for="item in selectList" :key="item.id">{{item.userRandomName}}}</sapn>
          </div>
        </el-form-item>
        <el-form-item label="头像" prop="pics">
          <ImageUpload :limit="avatarNum" v-model="formEditAvatar.pics"></ImageUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormEditAvatar">确定</el-button>
        <el-button @click="cancelEditAvatar">取消</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>
<script>
import { listList } from '@/api/user/list'
import {
  add,
  editName,
  editAvatar,
  openShop,
  openAnchor,
  editBalance,
  editGold,
  shopModify,
  addressEdit
} from '@/api/navy/user'
import { changeBalance } from '@/api/system/user'

export default {
  name: 'user',
  components: {},
  dicts: ['user_type', 'block_protocols', 'user_source'],
  data () {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户列表表格数据
      listList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userSysType: 0,
        userName: null,
        nickName: null,
      },
      open: false,
      open1: false,
      //修改用户信息
      form: {
        count: null,
        names: null,
        addShop: '1',
        addAnchor: '1',
      },
      rules: {
        count: [
          { required: true, message: "新增数量不能为空", trigger: "blur" }
        ],
        names: [
          { required: true, message: "水军用户名称不能为空", trigger: "blur" }
        ],
        addShop: [
          { required: true, message: "", trigger: "blur" }
        ],
        addAnchor: [
          { required: true, message: "", trigger: "blur" }
        ],
        invitationCode: [
          { required: true, message: "邀请码不能为空", trigger: "blur" }
        ]
      },
      selectList: [],
      avatarNum: 1,
      openEdit: false,
      formEdit: {},
      formPop: {
        email: '',
        pic: '',
      },
      edit: 'fund',
      openChangeBalance: false,
      formBalance: {
        amountIncurred: null,
        category: 'gf'
      },
      rulesCategory: {
        category: [{ required: true, message: '金额不能为空', trigger: 'change' }],
        amountIncurred: [{ required: true, message: '金额不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      },

    }
  },
  created () {
    this.getList()
  },
  methods: {
    /** 查询用户列表列表 */
    getList () {
      this.loading = true
      listList(this.queryParams).then(response => {
        this.listList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      console.log(selection)
      this.selectList = selection
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.avatarNum = selection.length
    },
    // 操作修改
    handleUpdate (row) {
      this.open1 = true
      row.pic = row.avatar
      this.formPop = JSON.parse(JSON.stringify(row))
    },

    //修改余额
    handleAmount (row) {
      this.openChangeBalance = true
      this.handleBalance(row)
    },
    //修改余额
    handleBalance: function (row) {
      this.formBalance.userId = row.id
      this.formBalance.amountIncurred = null
      this.openChangeBalance = true
    },
    // 重置新增表单
    reset () {
      this.form = {
        count: null,
        names: null,
        addShop: '1',
        addAnchor: '1',
      }
    },
    //检查已选数据
    checkUser: function () {
      if (this.ids.length == 0) {
        this.$modal.msgError("请先选择需要修改的水军用户！")
        return false
      } else {
        return true
      }
    },
    // 修改类型更改
    editType (type) {
      this.$refs["formEdit"].resetFields()
      this.$refs["formEdit"].clearValidate()
      this.edit = type
    },
    // 批量开店
    handleMoreOpen () {
      if (this.checkUser()) {
        openShop({ userIds: this.ids }).then(res => {
          this.$modal.msgSuccess("设置成功")
        })
      }
    },
    // 批量主播
    handleMoreAnchor () {
      if (this.checkUser()) {
        openAnchor({ userIds: this.ids }).then(res => {
          this.$modal.msgSuccess("设置成功")
        })
      }
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.title = "添加用户列表"
    },
    // 取消新增
    cancel () {
      this.open = false
      this.reset()
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.formPop.id != null) {
            let obj = {
              userId: this.formPop.id,
              userName: this.formPop.userName,
              email: this.formPop.email,
              pic: this.formPop.pic,
            }
            shopModify(obj).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open1 = false
              this.getList()
            })
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    /** 重置修改表单 */
    resetFormEdit () {
      this.formEdit = {}
    },
    /** 修改点击 */
    handleEdit () {
      console.log(this.checkUser())
      if (this.checkUser()) {
        this.resetFormEdit()
        this.openEdit = true
      }
    },
    // 取消修改
    cancelEdit () {
      this.openEdit = false
      this.resetFormEdit()
      this.$refs["formEdit"].resetFields()
      this.$refs["formEdit"].clearValidate()
    },
    /** 提交修改*/
    submitFormEdit () {
      this.$refs["formEdit"].validate(async valid => {
        if (valid) {
          let setData = { ...this.formEdit, userIds: this.ids }
          switch (this.edit) {
            case 'fund':
              await editBalance(setData)
              break
            case 'gold':
              await editGold(setData)
              break
            case 'name':
              await editName(setData)
              break
            case 'avatar':
              await editAvatar(setData)
              break
          }
          this.$modal.msgSuccess("修改成功")
          this.cancelEdit()
          this.getList()
        }
      })
    },
    //提交余额表单
    submitFormBalance: function () {
      this.$refs.formBalance.validate(valid => {
        if (valid) {
          let obj = {
            changeAmount: this.formBalance.category == 'de' ? this.formBalance.amountIncurred * -1 : this.formBalance.amountIncurred,
            userId: this.formBalance.userId,
            remark: this.formBalance.remark
          }
          changeBalance(obj).then(request => {
            this.$modal.msgSuccess('修改成功')
            this.openChangeBalance = false
            this.getList()
          })
        }
      })
    },
    //取消更改余额
    cancelFormBalance: function () {
      this.resetBalanceForm()
      this.openChangeBalance = false
    },
    //重置余额表单
    resetBalanceForm () {
      this.$nextTick(() => {

      })
    },
  }
}
</script>
